<template>
    <div id="chat-view">
        <div class="user-list">
            <ul class="chat-users-ul">
                <li v-for="(uid, index) in chatStore.getChatMapKeys" :key="index">
                    <button @click="curId = uid">
                        <userChatListItem :uid=uid />
                    </button>
                </li>
            </ul>
        </div>
        <div class="chat-field">
            <chatFieldBox :src-uid="curId" v-if="curId !== 0" />

        </div>
    </div>
</template>

<script setup>
    import { onUnmounted, onMounted, ref } from 'vue'
    import { useLoginUserStore } from '@/store/useLoginUserStore'
    import { useChatStore } from '@/store/useChatStore'
    import router from '@/router'
    import userChatListItem from '@/components/userChatListItem.vue'
    import chatFieldBox from '@/components/chatFieldBox.vue'
    const loginUserStore = useLoginUserStore()
    const chatStore = useChatStore()

    const curId = ref(loginUserStore.uid)
    // const curId = ref(0)




    onMounted(() => {
        setTimeout(() => {
            if (!loginUserStore.loginStatus) {
                router.push({
                    path: '/login/log'
                })
            }
        }, 1000)

    })
    onUnmounted(() => {
        // wsService.close()
    })

</script>

<style lang="less" scoped>
    * {
        margin: 0;
        padding: 0;
    }

    #chat-view {
        display: flex;
        margin: 20px auto;
        height: 420px;
        width: 80%;

        .user-list {
            background-color: rgba(255, 255, 255, 0.639);
            // flex: 2;
            width: 25%;
            overflow: hidden;

            ul {

                li {
                    list-style: none;

                    button {
                        width: 100%;
                        // height: 100px;
                        background-color: rgba(240, 255, 255, 0);
                        border-top: 0;
                        border-left: 0;
                        border-right: 0;
                        border-bottom: 1px solid #d2cfcfb2;
                    }

                    button:hover {
                        cursor: pointer;
                        background-color: rgba(223, 235, 235, 0.664);
                    }
                }
            }
        }

        .chat-field {
            background-color: rgba(255, 255, 255, 0.776);
            // flex: 6;
            width: 75%;
            height: 100%;

        }
    }
</style>